import React, {useState, useEffect} from 'react';
import DocumentTitle from 'react-document-title'
import {Picker, Toast} from 'antd-mobile';

import {getProductList, platformApply} from '@api/auth'

import {AuthenticationStyle} from '../style'
import {SmallButton} from '@style'
import {useSelector} from 'react-redux';
import {bindOpenidUniApplet} from '@api'


const profeesionList = [
  {label: '批发商', value: '批发商'},
  {label: '餐饮行业', value: '餐饮行业'},
  {label: '商超零售', value: '商超零售'},
  {label: '养殖户/养殖企业', value: '养殖户/养殖企业'},
  {label: '贸易公司', value: '贸易公司'},
  {label: '产品加工', value: '产品加工'},
  {label: '微商/电商企业', value: ' 微商/电商企业'},
  {label: '社区团购', value: '社区团购'},
  {label: '企业采购', value: '企业采购'},
  {label: '代办/经济人', value: '代办/经济人'},
  {label: '个体摊办', value: '个体摊办'},
  {label: '个人家庭', value: '个人家庭'}
];

const Into = () => {

  const [isProfeesion, setisProfeesion] = useState(false)
  const [isProduct, setisProduct] = useState(false)

  const [productList, setproductList] = useState([])

  const [productType, setproductType] = useState('');
  const [profeesion, setProfeesion] = useState('');
  const [storeName, setStoreName] = useState('');
  const [businessScope, setBusinessScope] = useState('');

  const appConfig = useSelector(state => state.appConfig)

  const {uniacid, appletOpenid, userInfo} = appConfig

  useEffect(() => {
    getProductList().then(res => {
      setproductList(res)
    })
  }, [])


  return (
    <>
      <DocumentTitle title={'入驻'}/>
      <AuthenticationStyle>

        <div className="top flex-row">
          <div className="content">
            <p>欢迎来到火蝶甄品拼货系统</p>
            <p>让我们认识一下你吧！</p>
          </div>
        </div>

        <div className="type flex-column">
          <div className="item flex-row"
               style={{
                 justifyContent: "space-between",
               }}
          >
            <div className="left">
              <span> 所属类目 </span>
            </div>
            <div className="right">


              <Picker
                data={productList}
                cols={1}
                // onChange={e => { console.log(e.toLocaleString()) }}
                visible={isProduct}
                onOk={e => {

                  findLabel(e.toLocaleString())

                }}
                onDismiss={() => {
                  setisProduct(!isProduct)
                }}
              >
              </Picker>

              <input
                readOnly={true}
                value={productType}
                onClick={() => {
                  setisProduct(!isProduct)
                }}
                style={{
                  width: 'auto',
                  textAlign: "right"
                }} type="text" placeholder='选择主营产品类 >'/>

            </div>
          </div>

          <div className="item flex-row"
               style={{
                 justifyContent: "space-between",
               }}
          >
            <div className="left">
              <span> 职业身份</span>
            </div>
            <div className="right">

              <Picker
                data={profeesionList}
                cols={1}
                // onChange={e => { console.log(e.toLocaleString()) }}
                visible={isProfeesion}
                onOk={e => {
                  setProfeesion(e.toLocaleString())
                  setisProfeesion(!isProfeesion)
                }}
                onDismiss={() => {
                  setisProfeesion(!isProfeesion)
                }}
              >
              </Picker>

              <input
                readOnly={true}
                value={profeesion}
                onClick={() => {
                  setisProfeesion(!isProfeesion)
                }}
                style={{
                  width: 'auto',
                  textAlign: "right"
                }} type="text" placeholder='请选择身份 >'/>


            </div>
          </div>

        </div>

        <div className="type flex-column">

          <div className="item flex-row" style={{
            justifyContent: 'space-between'
          }}>
            <div className="left">
              <span> 店铺名称 </span>
            </div>
            <div className="right">
              <input
                value={storeName}
                type="text"
                placeholder='请输入店铺名称'
                onChange={e => {
                  setStoreName(e.target.value)
                }}
                style={{
                  textAlign: "right"
                }}/>
            </div>
          </div>

          <div className="item">
            <div className="tops"
                 style={{
                   textAlign: "left",

                 }}
            >
              <span
                style={{
                  fontSize: '.4rem'
                }}
              > 经营范围 </span>
            </div>
            <div className="bottom">

              <textarea
                value={businessScope}
                onChange={e => {
                  setBusinessScope(e.target.value)
                }}
                style={{
                  width: '100%',
                  height: '2.35rem',
                  border: ' solid #E6E6E6 1px',
                  borderRadius: '.15rem',
                  padding: '.16rem .16rem',
                  boxSizing: "border-box",
                  resize: 'none'
                }}
                placeholder="请填写经营范围"
                name="" id="" cols="30" rows="10">
              </textarea>
            </div>
          </div>


        </div>

        <SmallButton>
          <div className="bottom" onClick={() => {
            check()
          }}>
            进入商城
          </div>
        </SmallButton>

      </AuthenticationStyle>
    </>
  )

  function findLabel(val) {

    let aa = productList.find(item => {
      return item.value === val
    })
    let bb = aa.label
    setproductType(bb)
    setisProduct(!isProduct)
  }

  function check() {

    if (productType === "") {
      Toast.info('请选择营业类目', 1)
    } else if (profeesion === "") {
      Toast.info('请选择职业', 1)
    } else if (storeName === "") {
      Toast.info('请填写店铺名称', 1)
    } else {
      let params = {
        uniacid: uniacid,
        manage_cate_id: productType,
        professional_identity: profeesion,
        name_of_business: storeName,
        scope_of_business: businessScope
      }

      platformApply(params).then(res => {
        if (res.status === 200) {
          Toast.success(res.msg, 1)
          bindOpenidUniApplet({uniacid, appletOpenid, openid: userInfo?.openid}).then(rex => {
            if (rex) {
              Toast.info('绑定成功', 1)
            } else {
              Toast.info(`绑定失败(${rex.msg})`, 1)
            }
          })
          window.location.reload()
        } else {
          Toast.fail(res.msg, 1)
        }
      })

    }
  }

}

export default Into;